import React, { useState, useEffect, useCallback } from 'react';
import { postAccAmoebaTradingFindXs, getAccAmoebaTradingAffirm } from '../../../financialApi'
import SelectModule from '../components/SelectModule';
import NoStateModule from '../components/OkAndNoStateModule';
import { SellStatus } from '../../enum';
import ButtonNoAndOk from '../../../../../assets/image/icon/noAndOk.png';
import ButtonOk from '../../../../../assets/image/icon/ok.png';
import ButtonNo from '../../../../../assets/image/icon/no.png';
import {
    PurchaseConfirmationPageAll,
    PurchaseConfirmationPageTop,
    PurchaseConfirmationPageContent
} from './style';
import { message, PageHeader, Table, Button, Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 费用管理 -- 内部交易 -- 生产交易单 -- 购买确认页面
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-24） 创建
 */

const PurchaseConfirmationPage = () => {
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [selectData, setSelectData] = useState({}); //搜索data
    const [clickId, setClickId] = useState(undefined);
    const [okAndNoStateModuleShow, setOkAndNoStateModuleShow] = useState(false);
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postAccAmoebaTradingFindXs(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    });
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    useEffect(() => {
        listFun();
    }, [listFun]);
    //搜索-- 搜索
    const handleSelectModuleOk = values => {
        const parames = {
            currentPage: 1,
            size: 10,
            ...values
        }
        setSelectData(values)
        listFun(parames);
    }
    //搜索-- 重置
    const handleSelectModuleReset = () => {
        listFun();
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size,
            ...selectData
        }
        listFun(parames);
    }
    //退回
    const handleReturn = id => {
        setClickId(id);
        setOkAndNoStateModuleShow(true)
    }
    //购买
    const handlePurchase = id => {
        confirm({
            title: '是否购买?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ; (async () => {
                    const { code, msg } = await getAccAmoebaTradingAffirm({
                        id,
                        isReceive: true
                    });
                    if (code === '20000') {
                        message.success('购买成功!');
                        const parames = {
                            currentPage: pagingData.currentPage,
                            size: pagingData.size,
                            ...selectData
                        }
                        listFun(parames);
                    } else {
                        message.error(msg);
                    }
                })();
            }
        });
    }
    const columns = [
        {
            title: '序号',
            align: 'center',
            width: '60px',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '交易单号',
            align: 'center',
            dataIndex: 'orderNo'
        },
        {
            title: '关联合同',
            align: 'center',
            dataIndex: 'conNo'
        },
        {
            title: '交货日期',
            align: 'center',
            dataIndex: 'deliveryDate'
        },
        {
            title: '产品名称',
            align: 'center',
            dataIndex: 'product'
        },
        {
            title: '产品数量',
            align: 'center',
            dataIndex: 'amount'
        },
        {
            title: '购买价格',
            align: 'center',
            dataIndex: 'outBoundMoney'
        },
        {
            title: '出售部门',
            align: 'center',
            dataIndex: 'assumeDepName'
        },
        {
            title: '购买状态',
            align: 'center',
            dataIndex: 'state',
            render: text => <span>
                {
                    text === 0 && <>
                        <img
                            style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                            src={ButtonNoAndOk}
                            alt='未出售icon'
                        />
                        <span style={{ color: '#666666' }}>
                            {SellStatus[text]}
                        </span>
                    </>
                }
                {
                    text === 1 && <>
                        <img
                            style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                            src={ButtonOk}
                            alt='已出售icon'
                        />
                        <span style={{ color: '#19DA38' }}>
                            {SellStatus[text]}
                        </span>

                    </>
                }
                {
                    text === 2 && <>
                        <img
                            style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                            src={ButtonNo}
                            alt='驳回icon'
                        />
                        <span style={{ color: '#FF0014' }}>
                            {SellStatus[text]}
                        </span>
                    </>
                }
            </span>
        },
        {
            title: '操作',
            align: 'center',
            render: (text, recode) => <>
                <Button type="link" onClick={() => handlePurchase(recode.id)}>购买</Button>
                <Button type="link" onClick={() => handleReturn(recode.id)} danger>退回</Button>
            </>
        },

    ];
    return <PurchaseConfirmationPageAll>
        <PurchaseConfirmationPageTop>
            <SelectModule
                pageName='leaveWarehouse'
                handleSelectModuleOk={handleSelectModuleOk}
                handleSelectModuleReset={handleSelectModuleReset}
            />
        </PurchaseConfirmationPageTop>
        <PurchaseConfirmationPageContent>
            <PageHeader
                className="site-page-header"
                title="全部列表"
            />
            <Table dataSource={listData} columns={columns} rowKey='id' pagination={pagination} />

        </PurchaseConfirmationPageContent>
        <NoStateModule
            okAndNoStateModuleShow={okAndNoStateModuleShow}
            setOkAndNoStateModuleShow={setOkAndNoStateModuleShow}
            clickId={clickId}
            handleSelectModuleOk={handleSelectModuleOk}
        />
    </PurchaseConfirmationPageAll>
}

export default PurchaseConfirmationPage;